<template>
  <div>
    <!--面包屑--> g
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/main' }" style="padding-bottom: 10px;font-size: 12px">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!--用户列表卡片-->
    <el-card class="box-card">
      <el-form :inline="true" :model="userVo" class="demo-form-inline">

        <el-form-item label="部门" label-width="70px">
          <el-select v-model="userVo.departmentId" placeholder="请选择">
            <el-option
              v-for="item in depCounts"
              :key="item.id"
              :label="item.name"
              :value="item.id">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">
                <span class="el-tag el-tag--success el-tag--mini el-tag--plain">{{ item.depCount }}</span>
              </span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="用户名" label-width="70px">
          <el-input v-model="userVo.username" placeholder="请输入用户名"></el-input>
        </el-form-item>

        <el-form-item label="邮箱" label-width="70px">
          <el-input v-model="userVo.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>

        <el-form-item label-width="70px">
          <el-radio v-model="userVo.sex" label="0">男</el-radio>
          <el-radio v-model="userVo.sex" label="1">女</el-radio>
          <el-radio v-model="userVo.sex" label="2">秘密</el-radio>
        </el-form-item>

        <el-form-item label="昵称" label-width="70px">
          <el-input v-model="userVo.nickname" placeholder="请输入昵称"></el-input>
        </el-form-item>

        <el-form-item style="margin-left: 10px">
          <el-button icon="el-icon-refresh">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit" @keyup.13="onSubmit">查询</el-button>
          <el-button type="success" icon="el-icon-plus">添加</el-button>
          <el-button type="warning" icon="el-icon-download">导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!--内容-->
    <el-table
      :data="userList"
      max-height="400px"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="#"
        width="50">
      </el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
        width="110">
      </el-table-column>

      <el-table-column
        prop="sex"
        label="性别"
        width="110"
        >
        <template slot-scope="scope">
          <span class="el-tag el-tag--success el-tag--mini el-tag--plain">{{scope.row.sex==0?'帅哥':(scope.row.sex==1?'小姐':'未知')}}</span>
        </template>
      </el-table-column>

      <el-table-column
        sortable
        prop="name"
        label="所属部门"
        width="180">
      </el-table-column>

      <el-table-column
        sortable
        prop="birth"
        label="生日"
        width="180">
      </el-table-column>

      <el-table-column
        sortable
        prop="email"
        label="邮箱"
        width="180">
        <template slot-scope="scope">
          {{scope.row.email==null?"暂无联系方式":scope.row.email}}
        </template>
      </el-table-column>

      <el-table-column
        prop="phoneNumber"
        label="电话"
        width="180">
        <template slot-scope="scope">
          {{scope.row.phoneNumber==null?"暂无联系方式":scope.row.phoneNumber}}
        </template>
      </el-table-column>

      <el-table-column
        prop="status"
        label="是否禁用"
        width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status==1"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>

      </el-table-column>

      <el-table-column
        label="操作">
        <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
        <el-button type="danger" size="mini" icon="el-icon-delete"></el-button>
        <el-button type="warning" size="mini" icon="el-icon-s-tools"></el-button>
      </el-table-column>

    </el-table>

    <!--分页-->
    <el-pagination
      style="padding-top: 15px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[6, 7, 8, 12]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
  import {findAll} from '../../api/users'
  import { findDepCount } from '../../api/departement'

  export default {
    name: 'Users',
    data () {
      return {
        /*查询条件*/
        userVo:{
          username:null,
          nickname:null,
          email:null,
          sex:null,
          departmentId:null
        },
        /*下拉列表数据*/
        depCounts: [],
        /*表格数据*/
        userList:[],
        /*当前页码*/
        current: 1,
        /*显示条数*/
        size: 6,
        /*总条数*/
        total: null
      }
    },
    /*创建主键时调用方法*/
    created(){
      //创建主键的时候调用查询所有用户的方法
      this.getUserList();
      this.getDepCount();
    },
    methods: {

      /*提交表单*/
      onSubmit () {
        /*this.findAll(this.current,this.size,this.userVo)*/
        this.getUserList()
        console.log(this.userVo)
      },

      /*当前显示条数改变时*/
      handleSizeChange (val) {
        //将val赋值给size
        this.size = val
        //重新去后台查询数据
        this.getUserList()
        console.log(`每页 ${val} 条`)
      },

      /*当前页码改变时*/
      handleCurrentChange (val) {
        //将val赋值给size
        this.current = val
        //重新去后台查询数据
        /*this.findAll(this.current,this.size,this.userVo)*/
        this.getUserList()
        console.log(`当前页: ${val}`)
      },

      /*查询全部用户信息*/
      /*findAll (current,size,userVo) {
        console.log("查询条件"+userVo)
        var $this = this
        this.axios.post('http://localhost:8081/system/user/findAll',userVo,{
          params:{
            current:current,
            size:size
          }
        })
          .then(function (response) {
            /!*将后台返回的数据绑定到tableData属性中*!/
            $this.userList = response.data.data.userList
            $this.total = response.data.data.total
            /!*输出用户信息在控制台*!/
            console.log("总条数"+response.data.data.total)
            console.log("用户信息:"+response.data.data.userList)
          })
          .catch(function (error) {
            console.log(error)
          })
      },*/

      /*查询部门信息及人数*/
      /*findDepCount(){
        var $this = this
        this.axios.get('http://localhost:8081/system/department/findDepCount', {
        })
          .then(function (response) {
            /!*将后台返回的数据绑定到tableData属性中*!/
            $this.depCounts = response.data.data.depCount
            /!*输出部门信息在控制台*!/
            console.log("部门信息:"+response.data.data.depCount)
          })
          .catch(function (error) {
            console.log(error)
          })
      },*/

      /*查询全部用户信息*/
      async getUserList(){
        const {data} = await findAll(this.current,this.size,this.userVo);
        /*将查询出来的数据赋值*/
        this.userList = data.data.userList;
        this.total = data.data.total;
        /*将用户信息输出在控制台上*/
        console.log(data.data.userList)
      },

      /*查询部门信息及人数*/
      async getDepCount(){
        const {data} = await findDepCount();
        console.log(data);
        this.depCounts = data.data.depCount;
      }

    },
    //加载事件
    /*mounted: function () {
      /!*调用方法 分页查询*!/
      this.findAll(this.current,this.size,null)
      /!*调用方法 查询部门信息*!/
      this.findDepCount()
    }*/

  }
</script>

<style scoped>

</style>
